<style>
    .preview .ivu-modal-mask, .preview .ivu-modal-wrap { 
        z-index: 10000;
    }
</style>

<template>
    <div>
        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="120">
            <FormItem label="课程分类名称" prop="name">
                <Input v-model="formValidate.name" placeholder="请输入分类名称"></Input>
            </FormItem>
            <FormItem label="课程类型" prop="type">
                <Select v-model="formValidate.type" placeholder="请选择课程类型">
                    <Option v-for="item in typelist" :value="item.value" :key="item.value">{{ item.label }}</Option>
                </Select>
            </FormItem>
            <FormItem label="排序值" prop="listorder">
                <Input v-model.number="formValidate.listorder" placeholder="请输入分类名称"></Input>
            </FormItem>
            <FormItem label="分类图标" prop="img_url">
                <Upload 
                    ref="upload"
                    :max-size="2048"
                    :format="['jpg','jpeg','png']"
                    :headers= "headers"
                    :on-format-error="handleFormatError"
                    :on-exceeded-size="handleMaxSize"
                    :on-success="handleUploadSuccess"
                    :on-error="handleUploadError"
                    :on-remove="handleRemoveFile"
                    :on-preview="handlePreview"
                    :before-upload="handleBeforeUpload"
                    :action="iconAction">
                    <Button type="ghost" icon="ios-cloud-upload-outline">上传图标</Button>
                </Upload>
                <input type="hidden" :value="formValidate.img_url">
            </FormItem>
            <FormItem>
                <Button type="primary" @click="handleSubmit('formValidate')" :disabled="isDisabled">提交</Button>
                <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
            </FormItem>
        </Form>
        <Modal title="预览图标" v-model="visible" class="preview">
            <img :src="pre_img_url" style="100%">
            <div slot="footer"></div>
        </Modal>
    </div>
</template>

<script>
import http from '../../../libs/http';
import Cookies from 'js-cookie';
export default {
    data () {
        return {
            iconAction: this.host+'admin/classCate/uploadIcon',
            isDisabled: false,
            uploadList: [],
            visible: false, //预览窗口
            pre_img_url: '', //预览图片路径
            typelist: [
                {
                    value: 1,
                    label: '视频'
                },
                {
                    value: 2,
                    label: '文章'
                },
                {
                    value: 3,
                    label: '直播'
                },
            ],
            formValidate: {
                name: '',
                type: '',
                listorder: '',
                img_url:''
            },
            ruleValidate: {
                name: [
                    { required: true, message: '名称不能为空', trigger: 'blur' }
                ],
                type: [
                    { type: 'number', required: true, message: '课程类型不能为空', trigger: 'change'}
                ],
                listorder: [
                    {type: 'number', message: '请输入数字', trigger: 'blur'}
                ],
                img_url: [
                    {required: true, message: '课程类型图标不能为空', trigger:'blur'}
                ]
            }
        }
    },
    methods: {
        handleSubmit (name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    //提交后台
                    var data = {
                        name: this.formValidate.name,
                        type: this.formValidate.type,
                        listorder: this.formValidate.listorder,
                        img_url: this.formValidate.img_url    
                    }
                    this.apiPost('admin/classCate/save', data).then((res) => {
                        if (res.code != 200) {
                            this.handleError(res);
                        } else {
                            this.$Message.success('添加成功');
                            this.$emit('addcancel');
                        }
                    })
                } else {
                    this.$Message.error('表单验证失败!');
                }
            });
        },
        handleBeforeUpload () {
            const check = this.uploadList.length < 2;
            this.isDisabled = true;
            if (!check) {
                this.$Notice.warning({
                    title: '每次仅能上传一张图片'
                });
            }
            return check;
        },
        handleFormatError (file) {
            this.$Notice.warning({
                title: '文件格式不正确',
                desc: '文件 ' + file.name + ' 格式不正确，请上传 jpg 或 png 格式的图片。'
            });
        },
        handleMaxSize (file) {
            this.$Notice.warning({
                title: '超出文件大小限制',
                desc: '文件 ' + file.name + ' 太大，不能超过 2M。'
            });
        },
        handleUploadSuccess (res, file) {
            this.formValidate.img_url = res.data;
            this.isDisabled = false;
            file.url = res.data;
        },
        handleUploadError (res, file, flieList) {
            this.handleError(res);
        },
        handlePreview (file) {  //预览上传图片
            this.pre_img_url = file.url;
            this.visible = true;
        },
        handleRemoveFile (file) {
            var data = { url: file.url }
            this.apiPost('admin/clasCate/deleteFile', data).then((res) => {
                this.formValidate.img_url = '';
            })
        },
        handleReset (name) {
            this.$refs[name].resetFields();
        }
        
    },
    mounted () {
        this.uploadList = this.$refs.upload.fileList;
    },
    computed: {
        headers() {
            return {
                'authKey': Cookies.get('authKey'),
                'sessionId': Cookies.get('sessionId')
            }
        }
    },
    mixins: [http]
}
</script>
